<template>
    <div class="homework-list">
        <a-card title="已发布作业">
            <a-list :data-source="homeworkList" :loading="loading">
                <template #renderItem="{ item }">
                    <a-list-item>
                        <a-list-item-meta :description="item.description">
                            <template #title>
                                <router-link :to="`/teacher/correct/${item.id}`">
                                    {{ item.title }}
                                </router-link>
                                <a-tag :color="statusColorMap[item.status]" style="margin-left: 8px">
                                    {{ statusTextMap[item.status] }}
                                </a-tag>
                            </template>
                            <template #avatar>
                                <span>用户ID:{{ item.studentId }}</span>
                            </template>
                        </a-list-item-meta>
                        <div class="extra-info">
                            <div>课程：{{ item.courseTitle }}</div>
                            <div>截止时间：{{ formatTime(item.deadline) }}</div>
                            <div v-if="item.status === 2">得分：{{ item.score }}分</div>
                            <div v-else-if="item.status === 0">等待用户提交作业</div>
                        </div>

                        <template #actions>
                            <a-button 
                                v-if="item.status === 1" 
                                @click="router.push(`/teacher/correct/${item.id}`)"
                                type="primary"
                            >
                                立即批改
                            </a-button>
                        </template>
                    </a-list-item>
                </template>
            </a-list>
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getPublishedHomeworkApi } from '/@/api/homework';
import dayjs from 'dayjs';
import { Homework } from '/@/entity/Homework';
import { useRouter } from 'vue-router';

const homeworkList = ref<Homework[]>([]);
const loading = ref(false);
const router = useRouter();

const statusTextMap = {
    0: '待用户完成',  // 修改状态0的显示文本
    1: '待批改',
    2: '已批改'
};

const statusColorMap = {
    0: 'orange',    // 未完成状态颜色
    1: 'red',       // 待批改状态颜色
    2: 'green'      // 已批改状态颜色
};

const formatTime = (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm');

onMounted(async () => {
    loading.value = true;
    try {
        homeworkList.value = await getPublishedHomeworkApi();
    } catch (error) {
        message.error('加载作业列表失败');
    } finally {
        loading.value = false;
    }
});
</script>

<style scoped>
.homework-list {
    padding: 20px;
}

.extra-info {
    min-width: 200px;
    text-align: right;
    color: #666;
    font-size: 13px;
}
</style>